<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- Standard Meta -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css">
  <!-- Site Properities -->
  <title>登录页面</title>

</head>
<body>
<div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
    <div class="ui container">
        <div class="ui middle aligned center aligned grid">
  <div class="column">
    <h2 class="ui teal image header">

      <div class="content"><trans oldtip=" Log-in to your account " newtip="数据结构知识管理系统">数据结构知识管理系统</trans></div>
    </h2>
    <form class="ui large form">
      <div class="ui stacked segment">
        <div class="field">
          <div class="ui left icon input">
            <i class="user icon"></i>
            <input type="text" name="login" placeholder="用户名">
          </div>
        </div>
        <div class="field">
          <div class="ui left icon input">
            <i class="lock icon"></i>
            <input type="password" name="pwd" placeholder="密码">
          </div>
        </div>
        <div class="ui fluid large teal submit button"><input type='button' value='注册'></div>
      </div>

      <div class="ui error message"></div>

    </form>


  </div>
</div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<script>
    //item使用其来引用到m-mobile-hidden  用以判断显示display
    $('.menu.toggle').click(function () {
       $('.m-item').toggleClass('m-mobile-hide');
    });
    //dropdown使用方式
    $('.ui.dropdown').dropdown({
        on:'hover'
    });

    var open = 0;


    $('input[type="button"]').click(function () {
        var login = $('input[name="login"]').val();
        var pwd = $('input[name="pwd"]').val();

        if (login == '') {
            ErroAlert('请输入您的账号');
        } else if (pwd == '') {
            ErroAlert('请输入密码');
        } else {
            //登陆
            $.ajax({
                url: '/userLogin',
                type: 'POST',
                data: JSON.stringify({userId: login, password: pwd}),
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    console.log(data)
                    if (200 == data.code) {
                        location.href = 'index.html'
                    } else if (404 == data.code) {
                        alert("账号或者密码错误")
                    } else {
                        alert("登录异常")
                    }
                },
                error: function (err) {
                    alert("登录异常");
                }
            });

        }
    })
</script>
</body>

</html>